<template>
    <div class="home">
        <div class="content1">
            <!-- <div class="box1">
                <h2>大屏数据可视化</h2>
            </div> -->
            <!-- <div class="box2" align="center">
                <dv-flyline-chart-enhanced :config="config" style="width:100%;height:100%;" />
            </div> -->
            <div class="container">
                <div class="box">
                    <div class="left">
                        <div class="title">总用户数</div>
                        <div class="number" style="color: #40a362;">5194人</div>
                    </div>
                    <div class="right">
                        <el-icon name="el-icon-user-solid"></el-icon>
                    </div>
                </div>

                <div class="box">
                    <div class="left">
                        <div class="title">总题库数</div>
                        <div class="number" style="color: #f9d65a;">134个</div>
                    </div>
                    <div class="right">
                        <el-icon name="el-icon-document"></el-icon>
                    </div>
                </div>

                <div class="box">
                    <div class="left">
                        <div class="title">总题目数</div>
                        <div class="number" style="color: #ffa265;">34914</div>
                    </div>
                    <div class="right">
                        <el-icon name="el-icon-edit"></el-icon>
                    </div>
                </div>

                <div class="box">
                    <div class="left">
                        <div class="title">总规则数</div>
                        <div class="number" style="color: #abd977;">459个</div>
                    </div>
                    <div class="right">
                        <el-icon name="el-icon-s-check"></el-icon>
                    </div>
                </div>
            </div>
            <div class="box111" style="display: flex; justify-content: space-between;">
                <div ref="lineChart" style="width: 600px; height: 400px;"></div>
                <div ref="pieChart" style="width: 600px; height: 400px;"></div>
            </div>
            
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "",
    data() {
        return {
            config: {
                points: [
                    {
                        name: '郑州',
                        coordinate: [0.48, 0.35],
                        halo: {
                            show: true,
                        },
                        icon: {
                            src: '/img/flylineChart/mapCenterPoint.png',
                            width: 30,
                            height: 30
                        },
                        text: {
                            show: false
                        }
                    },
                    {
                        name: '新乡',
                        coordinate: [0.52, 0.23]
                    },
                    {
                        name: '焦作',
                        coordinate: [0.43, 0.29]
                    },
                    {
                        name: '开封',
                        coordinate: [0.59, 0.35]
                    },
                    {
                        name: '许昌',
                        coordinate: [0.53, 0.47]
                    },
                    {
                        name: '平顶山',
                        coordinate: [0.45, 0.54]
                    },
                    {
                        name: '洛阳',
                        coordinate: [0.36, 0.38]
                    },
                    {
                        name: '周口',
                        coordinate: [0.62, 0.55],
                        halo: {
                            show: true,
                            color: '#8378ea'
                        }
                    },
                    {
                        name: '漯河',
                        coordinate: [0.56, 0.56]
                    },
                    {
                        name: '南阳',
                        coordinate: [0.37, 0.66],
                        halo: {
                            show: true,
                            color: '#37a2da'
                        }
                    },
                    {
                        name: '信阳',
                        coordinate: [0.55, 0.81]
                    },
                    {
                        name: '驻马店',
                        coordinate: [0.55, 0.67]
                    },
                    {
                        name: '济源',
                        coordinate: [0.37, 0.29]
                    },
                    {
                        name: '三门峡',
                        coordinate: [0.20, 0.36]
                    },
                    {
                        name: '商丘',
                        coordinate: [0.76, 0.41]
                    },
                    {
                        name: '鹤壁',
                        coordinate: [0.59, 0.18]
                    },
                    {
                        name: '濮阳',
                        coordinate: [0.68, 0.17]
                    },
                    {
                        name: '安阳',
                        coordinate: [0.59, 0.10]
                    }
                ],
                lines: [
                    {
                        source: '新乡',
                        target: '郑州'
                    },
                    {
                        source: '焦作',
                        target: '郑州'
                    },
                    {
                        source: '开封',
                        target: '郑州'
                    },
                    {
                        source: '周口',
                        target: '郑州',
                        color: '#fb7293',
                        width: 2
                    },
                    {
                        source: '南阳',
                        target: '郑州',
                        color: '#fb7293',
                        width: 2
                    },
                    {
                        source: '济源',
                        target: '郑州'
                    },
                    {
                        source: '三门峡',
                        target: '郑州'
                    },
                    {
                        source: '商丘',
                        target: '郑州'
                    },
                    {
                        source: '鹤壁',
                        target: '郑州'
                    },
                    {
                        source: '濮阳',
                        target: '郑州'
                    },
                    {
                        source: '安阳',
                        target: '郑州'
                    },
                    {
                        source: '许昌',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '平顶山',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '洛阳',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '驻马店',
                        target: '周口',
                        color: '#8378ea'
                    },
                    {
                        source: '信阳',
                        target: '周口',
                        color: '#8378ea'
                    },
                    {
                        source: '漯河',
                        target: '周口',
                        color: '#8378ea'
                    }
                ],
                icon: {
                    show: true,
                    src: '/img/flylineChart/mapPoint.png'
                },
                text: {
                    show: true,
                },
                k: 0.5,
                bgImgSrc: '/img/flylineChart/map.jpg'
            }

        }
    },
    mounted() {
        this.drawTopicChart();
        this.drawPieChart();
    },
    methods: {
        drawTopicChart() {
            let lineChart = echarts.init(this.$refs.lineChart);

            let option = {
                color: ['#3398DB'],
                title: {
                    text: '题目数量增长变化折线图',
                    textStyle: {
                        color: '#333',
                        fontStyle: 'normal',
                        fontWeight: 'bolder',
                        fontFamily: 'Courier New',
                        fontSize: 18,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    },
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    padding: [10, 15]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} K题',
                            textStyle: {
                                color: '#666'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '题目数量',
                        type: 'line',
                        data: [1, 1.5, 2, 1.8, 2.2, 2.5],// 均以千为单位
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                        '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                lineStyle: {
                                    color: '#3398DB'
                                }
                            }
                        },
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
                ]
            };
            lineChart.setOption(option);
        },
        drawPieChart() {
    let pieChart = echarts.init(this.$refs.pieChart);

    let option = {
        title: {
            text: '题目类型数量占比',
            subtext: 'total: 7',
            left: 'center',
            textStyle: {
                color: '#333',
                fontStyle: 'normal',
                fontWeight: 'bold',
                fontFamily: 'Courier New',
                fontSize: 18,
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '题目类型',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 7511, name: '单选题' },
                    { value: 6450, name: '判断题' },
                    { value: 5840, name: '填空题' },
                    { value: 5096, name: '多选题' },
                    { value: 4462, name: '简答题' },
                    { value: 3200, name: '编程题' },
                    { value: 1299, name: '画图题' }
                ].sort(function (a, b) { return a.value - b.value; }),
                label: {
                    color: params => params.data.itemStyle.color
                },
                itemStyle: {
                    color: params => {
                        const colorList = ['#40a362','#f9d65a','#ffa265','#abd977','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'];
                        return colorList[params.dataIndex];
                    }
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };

    pieChart.setOption(option);
}
    }
}
</script>

<style lang="less" scoped>
.container {
    color: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // margin: 20px;
    padding: 20px;
    // margin-top: -50px;
    // background-color: #f5f5f5;
    border-radius: 10px;
    // box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
}

.box {
    flex-basis: 24%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.left {
    flex: 1;
    padding-right: 20px;

    .title {
        font-size: 20px;
        font-weight: 700;
        color: #000;
        margin-bottom: 5px;
    }

    .number {
        font-size: 24px;
        color: #0D47A1;
        font-weight: bold;
    }
}

.right {
    font-size: 40px;
    color: #3D5AFE;
}

.home {
    // height: 100%;

    // .content1 {
    //     width: 100%;
    //     height: 100%;
    //     color: #fff;
        // background-color: #041a6a;
        // 设置网格布局
        // display: grid;
        // // 设置列数，每一个列所占的份数
        // grid-template-columns: repeat(3, 1fr);
        // grid-template-rows: repeat(3, 1fr);
        // grid-template-rows: 50px 1fr 1fr 1fr;
        // gap: 10px;

        // .box1 {
        //     grid-column: span 3;

        //     h2 {
        //         text-align: center;
        //         margin: 0;
        //         line-height: 50px;
        //         color: #409eff;
        //         // color: #fff;
        //         font-size: 22px;
        //         font-weight: bold;
        //     }
        // }

        // .box8 {
        //     grid-column: span 2;
        // }
    // }
}
</style>